
    var ul = document.getElementById('ul');
    var imgS = ul.children;
    var ol = document.getElementsByTagName('ol')[0];
    var prev = document.getElementById('button-left');
    var next = document.getElementById('button-right');
    var width = imgS[0].offsetWidth;
    var key = 0;
    var square = 0;

    for (var i = 0; i < imgS.length; i++) {
        var newLi = document.createElement('li')
        ol.appendChild(newLi)
    }
    var pointS = ol.children;
    light(0)

    var newImg = imgS[0].cloneNode(true);
    ul.appendChild(newImg);

    for (var i = 0; i < pointS.length; i++) {
        pointS[i].onmouseenter = function () {
            move(ul, 'left', -this.num * width)
            light(this.num)
            square = key = this.num
        }
    }

    prev.onclick = function () {
        key--
        square--
        if (square < 0) {
            square = pointS.length - 1
        }
        if (key < 0) {
            key = imgS.length - 2
            ul.style.left = -(imgS.length - 1) * width + "px"
        }
        move(ul, 'left', -key * width)
    }

    next.onclick = autoplay
    var timer = setInterval(autoplay, 5000)
    var all = document.getElementById('banner-con')

    all.onmouseleave = function () {
        clearInterval(timer)
        timer = setInterval(autoplay, 5000)
    }
    all.onmouseenter = function () {
        clearInterval(timer)
    }

    function autoplay() {
        key++
        square++
        if (square > pointS.length - 1) {
            square = 0
        }
        if (key > imgS.length - 1) {
            key = 1
            ul.style.left = 0
        }
        move(ul, 'left', -key * width)
        light(square)
    }

    function light(num) {
        for (var i = 0; i < pointS.length; i++) {
            pointS[i].className = ""
        }
        pointS[num].className = "current"
    }